<template>
<div class="DetailComment">
    <div class="line"></div>
      <div class="top">
        <span>用户评价</span> <span>更多 >></span>
      </div>
  <div v-for="item in commentInfo" >
      <div class="imgName">
        <span  class="uimg"><img :src="item.user.avatar" alt=""></span> <span  class="uname">{{item.user.uname}}</span>
        <p class="content">{{item.content}}</p>
      </div>
      <div class="data">
      <span>{{item.created | showDate}}</span> <span>{{item.style}}</span>
       <span v-for="extraInfoItem in item.extraInfo">{{extraInfoItem}}</span>
      </div>
      <p class="showImg"><img :src="imgs" alt="" v-for="imgs in item.images" ></p>

  </div>
</div>
</template>

<script>
import {formatDate} from '@/common/tools'
  export default {
    name:'DetailComment',
    props:{
     commentInfo:{
         type:Array,
         default(){
           return []
         }
     }
    },
    filters:{
       showDate(value){
          //  将时间戳转换为date对象
            const date= new Date(value*1000)
            //date格式化
          return formatDate(date,'yyyy-MM-dd hh:mm:ss')
       }
    },
  }
</script>

<style  scoped>
.DetailComment{
 padding: 25px 5px 0px 5px;
}
.line{
height: 3px;
border-top: 5px solid rgb(224, 222, 222);
margin: 35px 0;
}
.top{
position: relative;
color: rgb(19, 18, 18);
margin-bottom: 35px;
border-bottom: 1px solid rgb(145, 143, 143);
padding-bottom: 5px;
}

.top span:nth-child(2){
position: absolute;
right: 13px;
}
.top span:nth-child(1){
padding-left: 15px;
}

.uimg img{
border-radius: 50%;
height: 55px;
vertical-align: middle;
}
.uname{
font-size: 20px;
color: rgb(41, 41, 41);
}
.imgName{
padding-bottom: 10px;
}
.content{
padding-top: 15px;
color: rgb(99, 98, 98);
}
.data{
font-size: 13px;
color: rgb(201, 201, 196);
}
.data span{
width: 50px;
padding-right: 10px;
}
.showImg{
height: 185px;
padding-left: 11px;
}
.showImg img{
height: 100%;
width: 47%;
padding: 10px 5px;
}


</style>
